<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta  charset="UTF-8">
    <link rel="stylesheet" type="text/css" charset="UTF-8" href="/js/easyui/themes/default/easyui.css" th:href="@{js/easyui/themes/default/easyui.css}"/>
    <link rel="stylesheet" type="text/css" charset="UTF-8" href="/js/easyui/themes/icon.css" th:href="@{js/easyui/themes/icon.css}" />
    <link rel="stylesheet" type="text/css" charset="UTF-8" href="/css/main.css" th:href="@{css/main.css}" />
    <script type="text/javascript" charset="UTF-8" src="/js/easyui/jquery.min.js" th:src="@{js/easyui/jquery.min.js}"></script>
    <script type="text/javascript" charset="UTF-8" src="/js/easyui/jquery.easyui.min.js" th:src="@{js/easyui/jquery.easyui.min.js}"></script>
    <script type="text/javascript" charset="UTF-8" src="/js/easyui/locale/easyui-lang-zh_CN.js" th:src="@{js/easyui/locale/easyui-lang-zh_CN.js}"></script>
</head>
<body class="easyui-layout">
    <div id="left" data-options="region:'west',title:'部门',split:true">
        <ul id="deptTree"></ul>
    </div>
    <div id="middle" data-options="region:'center'">
        <table id ="userDataGrid"></table>
    </div>
    <div id ="userDialog"></div>
</body>
<script type="text/javascript" >
    $(function(){
        $('#deptTree').tree({
            url : '/depts/tree ',
            method :'GET',
            lines : true,
            onLoadSuccess : function(node,data){
                if(data){
                    $(data).each(function(index,value){
                        if(this.state == 'closed'){
                            $('#deptTree').tree('expandAll');
                        }
                    });
                }
            },
            onClick : function(node){
                if(node.id){
                    $.ajax({
                        type : 'GET',
                        url : '/depts/'+node.id+'/user',
                        beforeSend : function () {
                            $('#userDataGrid').datagrid('loading');
                        },
                        success : function (data) {
                            if (data) {
                                $('#userDataGrid').datagrid('loaded');
                                $('#userDataGrid').datagrid('load');
                                $('#userDataGrid').datagrid('unselectAll');
                            }
                        },
                    });
                }
            }
        });
        user = {
            //添加记录
            add : function(){
                $('#userDialog').dialog('open');
                $('#userDialog').dialog('refresh','/user/add.ftl');
            },
            //删除记录
            remove : function(){
                var rows = $('#userDataGrid').datagrid('getSelections');
                if(rows.length > 0){
                    $.messager.confirm('确定操作','您正的要删除所选的记录吗？',function(flag){
                        if (flag){
                            var ids = [];
                            for (var i = 0; i < rows.length; i ++) {
                                ids.push(rows[i].id);
                            }

                            $.ajax({
                                type : 'delete',
                                url : '/users/'+rows[0].id,
                                data : {
                                    ids : ids.join(','),
                                },
                                beforeSend : function () {
                                    $('#userDataGrid').datagrid('loading');
                                },
                                success : function (data) {
                                    if (data) {
                                        $('#userDataGrid').datagrid('loaded');
                                        $('#userDataGrid').datagrid('load');
                                        $('#userDataGrid').datagrid('unselectAll');
                                        $.messager.show({
                                            title : '提示',
                                            msg : data + '个员工被删除成功！',
                                        });
                                    }
                                },
                            });
                        }
                    });
                } else {
                    $.messager.alert('警告','请选择要删除的记录！','info');
                }
            },
            edit : function(){
                var rows = $('#userDataGrid').datagrid('getSelections');
                if (rows.length > 1){
                    $.messager.aler('警告操作','编辑记录只能选定一条数据！','warning');
                } else if (rows.length == 1){
                    $.ajax({
                        type : 'GET',
                        url : '/users/'+rows[0].id,
                        data : {
                            id : rows[0].id,
                        },
                        beforeSend : function(){
                            $.messager.progress({
                                text : '正在尝试获取数据...',
                            });
                        },
                        success : function(data){
                            $.messager.progress('close');
                            if(data){
                                var userobj = $.parseJSON(data);
                                $('#user').form('load',{
                                    id : userobj[0].id,
                                    text : userobj[0].text,
                                    pid : userobj[0].pid,
                                    iconCls : userobj[0].iconCls,
                                    url : userobj[0].url,
                                }).dialog('open').dialog('center').dialog('setTitle','修改员工').dialog('iconCls','icon-edit');

                                $('#pid').combotree({
                                    url : 'menu.php',
                                    required : true,
                                    lines : true,
                                    //multiple : true,
                                    //checkbox : true,
                                    //onlyLeafCheck : true,
                                    onLoadSuccess : function (employee, data) {
                                        var _this = this;
                                        if (data) {
                                            $(data).each(function (index, value) {
                                                if ($.inArray(value.text, pid) != -1) {
                                                    $(_this).tree('check', value.target);
                                                }
                                                if (this.state == 'closed') {
                                                    $(_this).tree('expandAll');
                                                }
                                            });
                                        }
                                    },
                                });
                            } else {
                                $.messager.alert('获取失败','未知错误导致失败，请重试！','warning');
                            }
                        }
                    })
                } else if (rows.length == 0){
                    $.messager.alert('警告操作！','编辑记录至少选定一条数据！');
                }
            },
            search : function(){

            }
        }
        $('#userDataGrid').datagrid({
            iconCls : 'icon-search',//标题图标
            title : '员工列表',//标题名称
            fit : true,//全屏
            border : false,//无边框
            fitColumns : true,//列全屏
            striped : true,//显示斑马线效果
            rownumbers : true,//显示一个行号列
            pagination : true,//分页
            pageSize : 10,//每页显示10条
            pageList : [10,20,30,40,50],//每页条数可选
            pageNumber : 1,//默认显示第1页
            sortName : 'id',//按X列排序
            sortOrder : 'desc',//排序类型
            //工具栏
            toolbar : [
                {
                    iconCls:'icon-add',
                    text:'增加',
                    handler:function(){
                        $('#userDialog').dialog('open');
                        $('#userDialog').dialog('refresh','/user/add.ftl');
                    }
                },'-',{
                    iconCls:'icon-edit',
                    text:'修改',
                    handler:function(){
                        user.edit();
                    }

                },'-',{
                    iconCls:'icon-save',
                    text:'删除',
                    handler:function(){
                        user.remove();
                    }
                }
            ],
            //内容表格
            columns : [[
                {field:'id',title:'id',checkbox:'true',align:'center',width:100,sortable:true,},
                {field:'name',title:'姓名',align:'center',width:100,sortable:true,},
                {field:'phone',title:'手机号码',align:'center',width:100,sortable:true,},
                {field:'email',title:'E_mail',align:'center',width:100,sortable:true,},
                {field:'status',title:'状态',align:'center',width:100,sortable:true,
                    formatter:function(value,row,index){
                        if(value){
                            return '启用';
                        }else{
                            return '禁用';
                        }
                    }
                },
                {field:'gmtCreate',title:'创建时间',align:'center',width:100,sortable:true,},
                {field:'gmtModified',title:'更新时间',align:'center',width:100,sortable:true,},
            ]],
            url : '/users',
            method : 'GET',
        });

        $('#userDialog').dialog({
            width : 350,
            modal : true,
            closed : true,
            //iconCls : 'icon-add',
            buttons : [{
                text : '提交',
                iconCls : 'icon-add-new',
                handler : function () {
                    var user ={"phone":$('#phone').val(),"password":$('#password').val()};
                    if ($('#user').form('validate')) {
                        $.ajax({
                            url : '/users/',
                            contentType : 'application/json',
                            dataType : 'json',
                            type : 'POST',
                            data : JSON.stringify(user),
                            beforeSend : function () {
                                $.messager.progress({
                                    text : '正在添加用户中......',
                                });
                            },
                            success : function (data, response, status) {
                                $.messager.progress('close');
                                if (data > 0) {
                                    $.messager.show({
                                        title : '提示',
                                        msg : '员工成功！',
                                    });
                                    $('#userDialog').dialog('close').form('reset');
                                    $('#userDialog').datagrid('reload');
                                } else {
                                    $.messager.alert('失败！','未知错误导致失败，请重试！','warning');
                                }
                            }
                        });
                    }

                },
            },{
                text : '取消',
                iconCls : 'icon-redo',
                handler : function (){
                    $('#user').dialog('close').form('reset');
                },
            }],
        });

    });
</script>
</html>